<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
onMounted(()=>{
    let myChart = echarts.init(document.getElementById('chart1'));
    myChart.setOption({
    title: {
    },
    tooltip: {},
    // xAxis: {
    //     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    // },
    // yAxis: {},
    series: [
        {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
        }
    ]
    });

    window.addEventListener('resize', function() {
        myChart.resize();
    });
})
</script>

<template>
    <div class="home"> 
        <div style="height: 20px;"></div>
        <el-row>
            <el-col :span="24">
                <div style="display: flex;justify-content: center;align-items: center;font-size: 30px;font-weight: bold;">
                    当日进出站情况
                </div>
            </el-col>
        </el-row>
        <el-row gutter="10" justify="center" style="padding: 10px;">
            <el-col :span="4" style="display: flex;justify-content: center">
                <div style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;background-color: white;border-radius: 10px;font-size: 25px;">
                    进站车次: 200
                </div>
            </el-col>
            <el-col :span="4" style="display: flex;justify-content: center">
                <div style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;background-color: white;border-radius: 10px;font-size: 25px;">
                    进站车次: 200
                </div>
            </el-col>
            <el-col :span="4" style="display: flex;justify-content: center">
                <div style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;background-color: white;border-radius: 10px;font-size: 25px;">
                    进站车次: 200
                </div>
            </el-col>
            <el-col :span="4" style="display: flex;justify-content: center">
                <div style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;background-color: white;border-radius: 10px;font-size: 25px;">
                    进站车次: 200
                </div>
            </el-col>
            <el-col :span="4" style="display: flex;justify-content: center">
                <div style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;background-color: white;border-radius: 10px;font-size: 25px;">
                    进站车次: 200
                </div>
            </el-col>
            <el-col :span="4" style="display: flex;justify-content: center">
                <div style="width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;background-color: white;border-radius: 10px;font-size: 25px;">
                    进站车次: 200
                </div>
            </el-col>
        </el-row>
        <el-divider></el-divider>

        <el-row style="margin-top: 20px;">
            <el-col :span="24">
                <div style="display: flex;justify-content: center;align-items: center;font-size: 30px;font-weight: bold;">
                    当月进出站情况
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<style>
.home{
    width: 100%;
    height: 100%;
    background: rgb(240, 240, 240) !important;
    min-width: 1200px;
}

</style>